<template>
  <div>
    <!-- 头部 -->
    <head-tool>
      <template #right>
        <el-button type="primary" @click="$refs.perm.show()">添加权限</el-button>
      </template>
    </head-tool>
    <!-- 底部的表格 -->
    <el-card style="margin-top:20px;">
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
      >
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="code" label="标识" width="180" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button v-if="row.pid === '0'" type="text" @click="addLevel2(row.id)">添加</el-button>
            <el-button type="text" @click="$refs.perm.show(row.id)">编辑</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <perm-dialog ref="perm" :pid="currentId" @reload="getData" />
  </div>
</template>

<script>
import { perssionListAPI, delPermissionAPI } from '@/api/permission'
import { array2Tree } from '@/utils'
import PermDialog from './components/PermDialog.vue'
export default {
  components: {
    PermDialog
  },
  data() {
    return {
      tableData: [],
      currentId: '0'
    }
  },
  created() {
    this.getData()
  },

  methods: {
    async getData() {
      const res = await perssionListAPI()
      this.tableData = array2Tree(res.data, '0')
    },
    // 删除
    async del(id) {
      await delPermissionAPI(id)
      this.$message.success('删除成功！')
      this.getData()
    },
    // 添加二级
    addLevel2(id) {
      // 把id传过去--标准父传子
      this.currentId = id
      // 显示出对话框
      this.$refs.perm.show()
    }
  }
}
</script>

<style lang="scss" scoped></style>
